<template>
    <div style="padding:25px;">
        <el-scrollbar>
            <el-row>
                <el-col :span="4">
                    <el-card>
                        <leftTree ref="leftTree" :treeSetting="treeSetting" @handleTreeNode="handleTreeNode"></leftTree>
                    </el-card>
                </el-col>
                <el-col :span="20" style="padding-left:10px;">
                    <base-table :tableSetting="tableSetting" @handleCommon="handleCommon" ref="basetable"></base-table>
                </el-col>
            </el-row>
        </el-scrollbar>
    </div>
</template>


<script>
    import leftTree from '@/components/tree/tree.vue' //左边树
    import baseTable from '@/components/tabel/baseTable' //带分页 过滤查询的表格页面
    import {
        getData,
        postData,
        getSbList
    } from '@/api/test.js' // 接口
    import {
        SatusFilter
    } from '@/filter/index.js'
    export default {
        components: {
            leftTree,
            baseTable,
        },
        data() {
            return {
                //表格设置
                tableSetting: {
                    //表格请求接口函数
                    tabelApiFn: getSbList,
                    //过滤表单
                    filetrOptions: [{
                            componentName: 'nameipt', //组件名，
                            paramsName: 'name', //查询参数
                            placeholder: '请输入名字',
                        },
                        {
                            componentName: 'sexipt',
                            paramsName: 'sex',
                            placeholder: '请输入性别',
                        },
                        {
                            componentName: 'statusSelect', //组件名，
                            paramsName: 'status', //查询参数
                            placeholder: '',
                        },
                        {
                            componentName: 'typeSelect', //组件名，
                            paramsName: 'type', //查询参数
                            placeholder: '请选择类型',
                        },
                        {
                            componentName: 'startTime',
                            paramsName: 'startTime',
                        },
                        {
                            componentName: 'endTime',
                            paramsName: 'endTime',
                        }
                    ],
                    tabletype: 'selection', //表格类型 多选
                    options: [ //表格头配置  prop  label  width  align  html  color icon sortable
                        {
                            prop: 'lastActivityTime',
                            label: 'id--带宽度--带颜色-带点击事件',
                            width: 250,
                            color: 'red',
                            handleName: 'handleDetailById' //表格有的某一项可能也有点击事件
                        },
                        {
                            prop: 'locationId',
                            label: 'locationId',
                            color: 'green',
                            sortable: true,
                            width: 200
                        },
                        {
                            prop: 'locationValue',
                            label: '地址',
                            sortable: 'custom',
                            width: 200

                        },
                        {
                            prop: 'online',
                            label: '是否在线--带icon',
                            icon: 'icon-shangpin',
                            width: 200
                        },
                        {
                            prop: 'termCode',
                            label: '设备编码',
                        },
                        {
                            prop: 'termId',
                            label: '设备id',
                        },
                        {
                            prop: 'termName',
                            label: '设备名字',
                        },
                        {
                            prop: 'online',
                            width: 200,
                            label: '状态是否在线--带类型转换',
                            html: (row) => {
                                return SatusFilter(row.online) //后台返回的数据有时候是数字需要转换为中文
                            },
                        }
                    ],
                    //表格按钮配置 text size handleName:事件名  type icon
                    btns: [{
                            text: '详情',
                            size: 'small',
                            handleName: 'handleOne'
                        },
                        {
                            text: '删除',
                            size: 'small',
                            type: 'danger',
                            handleName: 'handleTwo'
                        },
                    ],
                    //表格按钮组配置
                    btnsGroup: []
                },
                //树组件设置
                treeSetting: {
                    //数据
                    data: [{
                        id: 1,
                        label: '一级 1',
                        children: [{
                            id: 4,
                            label: '二级 1-1',
                            children: [{
                                id: 9,
                                label: '三级 1-1-1'
                            }, {
                                id: 10,
                                label: '三级 1-1-2'
                            }]
                        }]
                    }, {
                        id: 2,
                        label: '一级 2',
                        children: [{
                            id: 5,
                            label: '二级 2-1'
                        }, {
                            id: 6,
                            label: '二级 2-2'
                        }]
                    }, {
                        id: 3,
                        label: '一级 3',
                        children: [{
                            id: 7,
                            label: '二级 3-1'
                        }, {
                            id: 8,
                            label: '二级 3-2'
                        }]
                    }],
                    //选树之后 查询右边table参数
                    treeParams:'test',
                    //树默认参数
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    },
                }
            }
        },
        mounted() {},
        methods: {
            handleCommon(name, row, idx) {
                console.log(name, row, idx)
                if (this[name]) {
                    this[name](row, idx)
                }
            },
            handleTabelChoose(row) {
                console.log(row)
                alert('多选删除事件', row)
            },
            handleOne() {
                alert('我是蓝色按钮事件')
            },
            handleTwo() {
                alert('我是红色按钮触发的事件')
            },
            handleDetailById(row) {
                alert('我是点击表格里面的事件')
            },
            //选择树 事件
            handleTreeNode(data,parmas){
               this.$refs.basetable.tableParams[parmas] = data
               this.$refs.basetable.initData()
            }
        }
    }
</script>
